<template>
    <div class="main">
        <div class="left">
            <div class="useInfo">
                <div class="left-top">
                    <el-avatar :src="authorAvatarUrl" @error="errorHandler">
                        <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
                    </el-avatar>
                    <div class="info">
                        <div class="name">{{ blog.author }}</div>
                        <div class="other">码龄4年</div>
                    </div>
                </div>
                <div>
                    <ul>
                        <li>18<div class="text">原创</div></li>
                        <li>11<div class="text">粉丝</div></li>
                        <li>11<div class="text">获赞</div></li>
                    </ul>
                </div>
                <div class="bottom">
                    <el-button type="primary" round @click="changeFollow" v-show="!isFollow">关注</el-button>
                    <el-button round @click="changeFollow" v-show="isFollow">已关注</el-button>
                </div>
            </div>
            <hot-article></hot-article>
        </div>
        <div class="right">
            <h1>{{ blog.title }}</h1>
            <el-divider></el-divider>
            <p v-html="blog.contents"></p>
        </div>
    </div>
</template>

<script>
import { ArticleDetail, userCenter } from '@/api'
import HotArticle from '@/components/HotArticle.vue'
export default {
    components:{
        HotArticle
    },
    data(){
        return {
            isFollow: false,
            blog:'',
            authorAvatarUrl:''
        }
    },
    methods:{
        changeFollow(){
            this.isFollow = !this.isFollow
            if(this.isFollow){
                this.$message({
                    message:'关注成功',
                    type:'success'
                })
            }else{
                this.$message({
                    message:'取关成功',
                    type:'warning'
                })
            }
        },
        errorHandler() {
            return true
        }
    },
    mounted(){
        let id = this.$route.params.id;
        ArticleDetail({ params: { blogId : id } }).then(res => {
            let { data } = res
            this.blog = data.blogs
            let authorId = this.blog.authorId
            userCenter({ params: { userid:authorId } }).then(res => {
                let { data } = res
                this.authorAvatarUrl = data.avatarUrl
            })
        })
    }
}
</script>

<style lang="less" scoped>
.main{
    display: flex;
    .right{
        width: 100%;
        margin-left: 10px;
        padding: 0 24px;
    }
}
.useInfo{
    width: 300px;
    padding: 16px 16px 6px 16px;
    box-sizing: border-box;
    border: 1px solid lightskyblue;
    border-radius: 5px;
    .left-top{
        display: flex;
        .info{
            margin-left: 8px;
           .name{
                font-size: 15px;
                color: #555666;
                height: 20px;
            }
            .other{
                margin-top: 5px;
                font-size: 13px;
                color: #999AAA;
                height: 20px;
            } 
        }
        
    }
    .el-avatar{
        width: 48px;
        height: 48px;
    }
    ul{
        display: flex;
        list-style: none;
        padding: 0;
        li{
            width: 30%;
            text-align: center;
            font-size: 14px;
            color: #4a4d52;
            .text{
                height: 28px;
                color: #222226;
                line-height: 28px;
            }
        }
    }
    .bottom{
        width: 100%;
        text-align: center;
        .el-button{
            width: 200px;
        }
    }
}
.recommend{
    width: 300px;
    margin-left: 0;
    box-sizing: border-box;
    padding: 10px 20px;
    margin-top: 20px;
}
</style>